<template>
  <a-config-provider :locale="locale">
    <div id="app-main">
      <div class="flex-v">
        <TopBar ref="TopBar"></TopBar>
        <div class="auto-flex">
          <Component :is="com"></Component>
        </div>
      </div>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { defineAsyncComponent } from 'vue'
import nav from './assets/js/nav.js'
import rootData from './assets/js/root-data.js'
import rootMethods from './assets/js/root-methods.js'
import TopBar from './components/top-bar/index.vue'
const components = { TopBar }

nav.list.forEach(v => components[rootMethods.convertCamelCase('-' + v.com)] = defineAsyncComponent(() => import(`@/components/${v.com}/index.vue`)))

export default {
  components,
  name: 'index-main',
  data() {
    return {
      locale: zhCN,
      ...rootData(this)
    }
  },
  computed: {
    r() {
      return this.$root.router
    },
    com() {
      const com = this.r.com
      return com && this.nav.list.some(v => v.com === com) ? com : this.nav.list[0].com
    }
  },
  watch: {
    router: {
      deep: true,
      handler(newVal) {
        const hash = '#' + JSON.stringify(newVal)
        if (hash !== decodeURIComponent(location.hash)) {
          const targetURL = location.origin + location.pathname + location.search + hash
          history[vm.isRouterPush ? 'pushState' : 'replaceState']({}, '', targetURL)
        } else {
          console.log('hash not change')
        }
        delete vm.isRouterPush
      }
    },
    ld: {
      deep: true,
      handler(newVal) {
        localStorage.ld = JSON.stringify(newVal)
      }
    },
  },
  methods: rootMethods,
  async mounted() {
    await this.init()
  }
}
</script>

<style lang="less" scoped>
#app-main {
  height: 100%;
}
</style>
